
/*使用外部字体*/
@font-face {
    font-family: BebasNeue-webfont;
    src: url("../fonts/BebasNeue-webfont.ttf");
}

/*复合选择器 逻辑或*/
a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var {
    margin: 0;
    padding: 0;
}

/**{*/
    /*margin: 0;*/
    /*padding: 0;*/
/*}*/


body{
    background: url("../images/pattern.gif") ;
    font-family: BebasNeue-webfont;
}
/*div块级标签*/
#header{
    /*background-color: orange;*/
    /*height: 3px;*/
    /*background-color: orange;*/
}

/*默认为带下划线蓝色字*/

a{
    text-decoration: none;
    color: black;
}
/*列表默认左侧有圆点*/
ul{

    list-style: none;
    display: inline-block;

}

#nav ul{
    /*background-color: purple;*/
}
#nav{
    text-align: center;
}


#nav li{
    float: left;
    margin: 20px 0px;

}


#nav ul li a{

    /*border: 10px solid white;*/
    width: 200px;
    color: white;
    font-size: 40px;
    /*float: left;*/
    text-align: center;
    display: inline-block;
    margin-left: 20px;

}

#nav ul li a:hover{

    background-color: white;
    color: black;
}
#nav ul li a.select{

    background-color: white;
    color: black;
}

#list{
    background-color: white;
    text-align: center;
}

#list .dom {
    width: 382px;
    /*height: 180px;*/
    display: inline-block;
    margin: 20px;
    text-align: left;


}

#list .dom p{
    color: #999;
    font-family: sans-serif;
    margin-bottom: 5px;

}
#list .dom a{
    background-color: coral;
    color: white;
    display: inline-block;
    width: 150px;
    height: 40px;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
}
#list .dom a:hover{
    background-color: rgb(11,17,15);
    color: white;
}

#footer{
    margin-top: 25px;
    text-align: center;
    margin-bottom: 20px;
}
#footer h2{
    color: white;
    font-size: 30px;

}
#footer ul li {
    margin-top: 15px;
    margin-left: 15px;
    display: inline-block;
}

#footer ul li:hover{
    /*不透明度*/
    opacity: 0.5;

}








/*响应式设计  监听屏幕宽度达到多少的时候就执行下面的内容*/
@media  screen and (max-width:1153px){
    #nav ul li a{
       width: 150px;
       font-size: 30px;
        margin: 10px 0px;

    }


}

@media  screen and (max-width:873px){
    #nav ul li a{
        width: 100px;
        font-size: 20px;
    }



}


@media  screen and (max-width:688px){
    #nav ul li a{
        width: 80px;
        font-size: 15px;

    }

    #list .dom {
        width: 200px;

    }

    #list .dom img {
        width: 200px;
        height: 100px;

    }


}